<template>
  <div>
    <div class="operate_wrap flex">
      <div class="flex-center g-flex flex-right">
        <el-select style="float: none; margin: 0; margin-right: 15px" class="select" size="small" v-model="search.projectId" value-key="id" clearable filterable placeholder="选择项目">
          <el-option v-for="item in selectList.project" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-select style="float: none; margin: 0; margin-right: 15px" class="select" size="small" v-model="search.status" value-key="id" clearable filterable placeholder="选择状态">
          <el-option v-for="item in selectList.status" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-button class="search" size="small" @click="getTreeData(true)">
          <i class="iconfont icon-sousuo"></i>&nbsp;搜索
        </el-button>
      </div>
    </div>

    <div class="realtimeBody">
      <div class="left">
        <div class="tongji">
          <div class="btn">
            <img src="../../../assets/images/real-time/inline.png" alt="inline" />
            <span class="txt">在线</span>
            <span class="num">{{ onlineCount }}</span>
          </div>
          <div class="btn">
            <img src="../../../assets/images/real-time/offline.png" alt="outline" />
            <span class="txt2">离线</span>
            <span class="num2">{{ offlineCount }}</span>
          </div>
          <!-- <div class="btn">
            <img
              src="../../../../../static/images/real-time/outline.png"
              alt="outline"
            />
            <span class="txt2">未知</span>
            <span class="num2">{{ outlineCount }}</span>
          </div> -->
        </div>
        <div class="realtime-tree">
          <el-tree :data="treeData" node-key="id" @node-click="handleNodeClick" :expand-on-click-node="true">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <div v-if="data.isLeaf == true" class="imgdiv">
                <img src="../../../assets/images/real-time/inline.png" alt="" v-if="data.status == 1" />
                <img src="../../../assets/images/real-time/offline.png" alt="" v-if="data.status == 0" />
                <!-- <img
                src="../../../../../static/images/real-time/outline.png"
                alt=""
                v-if="data.onLine == 2"
              /> -->
              </div>
              <span class="label" :title="data.name">{{ data.name }}</span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="FlexBoxChildren right">
        <div class="change">
          <div class="flex-center">
            <div class="change_1" @click="changeShowView(1)" :class="{selected: rightAmount === 1}">
              <div class="change_one"></div>
            </div>
            <div class="change_2" @click="changeShowView(2)" :class="{selected: rightAmount === 2}">
              <div class="change_one"></div>
              <div class="change_one"></div>
              <div class="change_one"></div>
              <div class="change_one"></div>
            </div>
            <div class="change_3" @click="changeShowView(3)" :class="{selected: rightAmount === 3}">
              <div class="change_one"></div>
              <div class="change_one"></div>
              <div class="change_one"></div>
              <div class="change_one"></div>
              <div class="change_one"></div>
              <div class="change_one"></div>
              <div class="change_one"></div>
              <div class="change_one"></div>
              <div class="change_one"></div>
            </div>
          </div>
          <i class="iconfont icon-quanping" style="color: #005fff;" @click="showFullScreen"></i>
        </div>
        <div class="FlexBoxParent content" id="fullScreen">
          <div v-if="rightAmount === 1">
            <div class="FlexBoxParent" style="margin-top:10px;">
              <div class="FlexBoxChildren one one_1">
                <div class="content" id="test11" @click="chooseBox(11)"></div>
                <div class="FlexBoxParent message_wrap">
                  <div class="FlexBoxChildren message_left flex-space-center">
                    <span class="name">{{viewName.name11}} </span>
                    <div>
                      <i class="el-icon-setting video-setting-icon" @click="showVideoSetting(viewName.id11)"></i>
                      <i class="el-icon-close video-setting-icon" @click="closeVideo(viewName.id11,11)"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="rightAmount === 2">
            <div class="FlexBoxChildren FlexBoxParent">
              <div class="FlexBoxChildren one one_2" :class="chooseIndex==21?'choose-video-box':''">
                <div class="content" id="test21" @click="chooseBox(21)"></div>
                <div class="FlexBoxParent message_wrap">
                  <div class="FlexBoxChildren message_left flex-space-center">
                    <span class="name">{{viewName.name21}} </span>
                    <div>
                      <i class="el-icon-setting video-setting-icon" @click="showVideoSetting(viewName.id21)"></i>
                      <i class="el-icon-close video-setting-icon" @click="closeVideo(viewName.id21,21)"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="between BETWEEN"></div>
              <div class="FlexBoxChildren one one_2" :class="chooseIndex==22?'choose-video-box':''">
                <div class="content" id="test22" @click="chooseBox(22)"></div>
                <div class="FlexBoxParent message_wrap">
                  <div class="FlexBoxChildren message_left flex-space-center">
                    <span class="name">{{viewName.name22}} </span>
                    <div>
                      <i class="el-icon-setting video-setting-icon" @click="showVideoSetting(viewName.id22)"></i>
                      <i class="el-icon-close video-setting-icon" @click="closeVideo(viewName.id22,22)"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="between_column BETWEEN_COLUMN"></div>
            <div class="FlexBoxChildren FlexBoxParent">
              <div class="FlexBoxChildren one one_2" :class="chooseIndex==23?'choose-video-box':''">
                <div class="content" id="test23" @click="chooseBox(23)"></div>
                <div class="FlexBoxParent message_wrap">
                  <div class="FlexBoxChildren message_left flex-space-center">
                    <span class="name">{{viewName.name23}} </span>
                    <div>
                      <i class="el-icon-setting video-setting-icon" @click="showVideoSetting(viewName.id23)"></i>
                      <i class="el-icon-close video-setting-icon" @click="closeVideo(viewName.id23,23)"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="between BETWEEN"></div>
              <div class="FlexBoxChildren one one_2" :class="chooseIndex==24?'choose-video-box':''">
                <div class="content" id="test24" @click="chooseBox(24)"></div>
                <div class="FlexBoxParent message_wrap">
                  <div class="FlexBoxChildren message_left flex-space-center">
                    <span class="name">{{viewName.name24}} </span>
                    <div>
                      <i class="el-icon-setting video-setting-icon" @click="showVideoSetting(viewName.id24)"></i>
                      <i class="el-icon-close video-setting-icon" @click="closeVideo(viewName.id24,24)"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="rightAmount === 3">
            <div class="FlexBoxChildren FlexBoxParent">
              <div class="FlexBoxChildren one one_3" :class="chooseIndex==31?'choose-video-box':''">
                <div class="content" id="test31" @click="chooseBox(31)"></div>
                <div class="FlexBoxParent message_wrap">
                  <div class="FlexBoxChildren message_left flex-space-center">
                    <span class="name">{{viewName.name31}} </span>
                    <div>
                      <i class="el-icon-setting video-setting-icon" @click="showVideoSetting(viewName.id)"></i>
                      <i class="el-icon-close video-setting-icon" @click="closeVideo(viewName.id,31)"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="between BETWEEN"></div>
              <div class="FlexBoxChildren one one_3" :class="chooseIndex==32?'choose-video-box':''">
                <div class="content" id="test32" @click="chooseBox(32)"></div>
                <div class="FlexBoxParent message_wrap">
                  <div class="FlexBoxChildren message_left flex-space-center">
                    <span class="name">{{viewName.name32}}</span>
                    <div>
                      <i class="el-icon-setting video-setting-icon" @click="showVideoSetting(viewName.id)"></i>
                      <i class="el-icon-close video-setting-icon" @click="closeVideo(viewName.id,32)"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="between BETWEEN"></div>
              <div class="FlexBoxChildren one one_3" :class="chooseIndex==33?'choose-video-box':''">
                <div class="content" id="test33" @click="chooseBox(33)"></div>
                <div class="FlexBoxParent message_wrap">
                  <div class="FlexBoxChildren message_left flex-space-center">
                    <span class="name">{{viewName.name33}}</span>
                    <div>
                      <i class="el-icon-setting video-setting-icon" @click="showVideoSetting(viewName.id)"></i>
                      <i class="el-icon-close video-setting-icon" @click="closeVideo(viewName.id,33)"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="between_column BETWEEN_COLUMN"></div>
            <div class="FlexBoxChildren FlexBoxParent">
              <div class="FlexBoxChildren one one_3" :class="chooseIndex==34?'choose-video-box':''">
                <div class="content" id="test34" @click="chooseBox(34)"></div>
                <div class="FlexBoxParent message_wrap">
                  <div class="FlexBoxChildren message_left flex-space-center">
                    <span class="name">{{viewName.name34}}</span>
                    <div>
                      <i class="el-icon-setting video-setting-icon" @click="showVideoSetting(viewName.id)"></i>
                      <i class="el-icon-close video-setting-icon" @click="closeVideo(viewName.id,34)"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="between BETWEEN"></div>
              <div class="FlexBoxChildren one one_3" :class="chooseIndex==35?'choose-video-box':''">
                <div class="content" id="test35" @click="chooseBox(35)"></div>
                <div class="FlexBoxParent message_wrap">
                  <div class="FlexBoxChildren message_left flex-space-center">
                    <span class="name">{{viewName.name35}}</span>
                    <div>
                      <i class="el-icon-setting video-setting-icon" @click="showVideoSetting(viewName.id)"></i>
                      <i class="el-icon-close video-setting-icon" @click="closeVideo(viewName.id,35)"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="between BETWEEN"></div>
              <div class="FlexBoxChildren one one_3" :class="chooseIndex==36?'choose-video-box':''">
                <div class="content" id="test36" @click="chooseBox(36)"></div>
                <div class="FlexBoxParent message_wrap">
                  <div class="FlexBoxChildren message_left flex-space-center">
                    <span class="name">{{viewName.name36}}</span>
                    <div>
                      <i class="el-icon-setting video-setting-icon" @click="showVideoSetting(viewName.id)"></i>
                      <i class="el-icon-close video-setting-icon" @click="closeVideo(viewName.id,36)"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="between_column BETWEEN_COLUMN"></div>
            <div class="FlexBoxChildren FlexBoxParent">
              <div class="FlexBoxChildren one one_3" :class="chooseIndex==37?'choose-video-box':''">
                <div class="content" id="test37" @click="chooseBox(37)"></div>
                <div class="FlexBoxParent message_wrap">
                  <div class="FlexBoxChildren message_left flex-space-center">
                    <span class="name">{{viewName.name37}}</span>
                    <div>
                      <i class="el-icon-setting video-setting-icon" @click="showVideoSetting(viewName.id)"></i>
                      <i class="el-icon-close video-setting-icon" @click="closeVideo(viewName.id,37)"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="between BETWEEN"></div>
              <div class="FlexBoxChildren one one_3" :class="chooseIndex==38?'choose-video-box':''">
                <div class="content" id="test38" @click="chooseBox(38)"></div>
                <div class="FlexBoxParent message_wrap">
                  <div class="FlexBoxChildren message_left flex-space-center">
                    <span class="name">{{viewName.name38}}</span>
                    <div>
                      <i class="el-icon-setting video-setting-icon" @click="showVideoSetting(viewName.id)"></i>
                      <i class="el-icon-close video-setting-icon" @click="closeVideo(viewName.id,38)"></i>
                    </div>
                  </div>
                </div>
              </div>
              <div class="between BETWEEN"></div>
              <div class="FlexBoxChildren one one_3" :class="chooseIndex==39?'choose-video-box':''">
                <div class="content" id="test39" @click="chooseBox(39)"></div>
                <div class="FlexBoxParent message_wrap">
                  <div class="FlexBoxChildren message_left flex-space-center">
                    <span class="name">{{viewName.name39}}</span>
                    <div>
                      <i class="el-icon-setting video-setting-icon" @click="showVideoSetting(viewName.id)"></i>
                      <i class="el-icon-close video-setting-icon" @click="closeVideo(viewName.id,39)"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="clear: both;"></div>
        </div>
      </div>
      <Detail :postDetail="postDetailData" @reloadList="getTreeData()"></Detail>
    </div>
  </div>
</template>

<script>
import { getAllVideo, getProject, saveVideoId, getVideoID } from '@/api/buss/video'
import Videojs from "video.js";
import "video.js/dist/video-js.css";
let iframe
let that
export default {
  name: 'videoView',
  components: {
    Detail: require('./detail/videoView-setting').default
  },
  data() {
    return {
      initVideos: [],
      total: 0,
      chooseIndex: '',
      uidvid: {
        userId: "",
        videoId: ""
      },
      postDetailData: {
        show: false,
        type: 'build'
      },
      rightAmount: 2, // 右侧显示的数值的平方
      search: {
        projectId: '',
        status: '',
      },
      // 所有下拉框列表的集合
      selectList: {
        project: [],
        status: [
          {
            name: '在线',
            id: '1'
          },
          {
            name: '离线',
            id: '0'
          }
        ],
      },
      treeData: [],
      searchKey: '',
      searchSize: 200,
      fileDialogData: {
        show: false
      },
      defaultProps: {
        children: 'children',
        label: 'position'
      },
      options: {
        autoplay: true, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
        preload: "auto", // 预加载
        controls: false // 显示播放的控件
      },
      onlineCount: 0,
      offlineCount: 0,
      outlineCount: 0,
      viewName: {
        name11: '',
        name21: '',
        name22: '',
        name23: '',
        name24: '',
        name31: '',
        name32: '',
        name33: '',
        name34: '',
        name35: '',
        name36: '',
        name37: '',
        name38: '',
        name39: '',
      }, // 各个视频窗口的名称
      leftList: '',
      player: {
        name11: '',
        name21: '',
        name22: '',
        name23: '',
        name24: '',
        name31: '',
        name32: '',
        name33: '',
        name34: '',
        name35: '',
        name36: '',
        name37: '',
        name38: '',
        name39: '',
      }
    }
  },
  mounted() {
    this.total = 0
    // this.getProject()
    /*  this.getTreeData(() => {
         // 切换视图数量
         this.dealTotal(this.rightAmount, true)
       }) */
    this.getTreeData()
    // this.getVideoID(this.uidvid)
    this.getNowUserId()
  },
  methods: {
    closeFullScreen() {
      $('#fullScreen').removeClass('fullScreen')
      $(".BETWEEN").addClass("between");
      $(".BETWEEN_COLUMN").addClass("between_column");
      if (this.rightAmount == 1) {
        $('.one_1').removeClass('onePadding')
      }
      if (this.rightAmount == 2) {
        $('.one_2').removeClass('twoPadding')
      }
      if (this.rightAmount == 3) {
        $('.one_3').removeClass('threePadding')

      }
    },
    showFullScreen() {
      let that = this
      $('#fullScreen').addClass('fullScreen')
      $(".BETWEEN").removeClass("between");
      $(".BETWEEN_COLUMN").removeClass("between_column");
      if (this.rightAmount == 1) {
        $('.one_1').addClass('onePadding')
      }
      if (this.rightAmount == 2) {
        $('.one_2').addClass('twoPadding')
      }
      if (this.rightAmount == 3) {
        $('.one_3').addClass('threePadding')

      }
      $(document).ready(function () { }).keydown(function (e) {
        if (e.which === 27) {
          //自定义逻辑
          that.closeFullScreen()
        }
      });
    },
    chooseBox(val) {
      this.chooseIndex = val
    },
    closeVideo(id, index) {
      $(`#test${index}`).html('')
      this.viewName[`name${index}`] = ''
      this.initVideos[index] = ''
    },
    getNowUserId() {
      this.uidvid.userId = JSON.parse(localStorage.getItem('sysUser')).id
    },
    saveVideoId(params) {

      saveVideoId(params).then((res) => {
        console.log(res, 'saveVideoId')

      });
    },
    getVideoID(params) {
      getVideoID(params).then((res) => {
        this.initVideos = res.data
        this.initVideos.reverse()
        $(`#test${this.rightAmount + '' + 1}`).html(`
              <iframe
                allowfullscreen="true"
                 src="https://ycsz.sxyc.gov.cn:13447/video/play.html?channel=${this.initVideos[0].videoId}&share=no&aspect=fullscreen"
                width="100%" height="100%"
                style="border: none;"
              ></iframe>
            `)
        this.viewName['name' + this.rightAmount + 1] = this.initVideos[0].name
        this.viewName['name' + this.rightAmount + 2] = this.initVideos[1].name
        this.viewName['name' + this.rightAmount + 3] = this.initVideos[2].name
        this.viewName['name' + this.rightAmount + 4] = this.initVideos[3].name
        $(`#test${this.rightAmount + '' + 2}`).html(`
              <iframe
                allowfullscreen="true"
                 src="https://ycsz.sxyc.gov.cn:13447/video/play.html?channel=${this.initVideos[1].videoId}&share=no&aspect=fullscreen"
                width="100%" height="100%"
                style="border: none;"
              ></iframe>
            `)
        $(`#test${this.rightAmount + '' + 3}`).html(`
              <iframe
                allowfullscreen="true"
                 src="https://ycsz.sxyc.gov.cn:13447/video/play.html?channel=${this.initVideos[2].videoId}&share=no&aspect=fullscreen"
                width="100%" height="100%"
                style="border: none;"
              ></iframe>
            `)
        $(`#test${this.rightAmount + '' + 4}`).html(`
              <iframe
                allowfullscreen="true"
                 src="https://ycsz.sxyc.gov.cn:13447/video/play.html?channel=${this.initVideos[3].videoId}&share=no&aspect=fullscreen"
                width="100%" height="100%"
                style="border: none;"
              ></iframe>
            `)
      });
    }
    ,
    getProject() {
      //   alert(this.search.projectId);
      getProject().then((res) => {
        this.$set(this.selectList, 'project', res.data)
      })
        .catch((res) => {
          console.log('请求出现错误', res)
        })
    },
    showVideoSetting(id) {
      console.log("id=", id)
      if (id) {
        console.log(id, '视频idNumber')
        this.postDetailData = {
          show: true,
          type: 'edit',
          typeName: '编辑',
          videoId: id,
          params: { detailId: id }
        }
      }
    },
    getTreeData() {
      getAllVideo(this.search).then(res => {
        this.treeData = res.data
        this.$set(this, 'onlineCount', res.data[0].onLineCount)
        this.$set(this, 'offlineCount', res.data[0].offLineCount)
        this.$set(this, 'outlineCount', res.data[0].outLineCount)
      }).finally(() => {

      });
    },
    handleNodeClick(data) {
      if (data.channel) {
        this.uidvid.videoId = data.channel
        //this.saveVideoId(this.uidvid)
      }
      if (data.isLeaf) {
        this.total++;
        this.dealTotal(data)
        // this.showVideo(data)
      }
    },
    //处理点击次数
    dealTotal(item) {
      let count = 0
      if (this.chooseIndex) {
        this.rightAmount = Number(String(this.chooseIndex).substr(0, 1))
        this.total = Number(String(this.chooseIndex).substr(1, 1))
      }
      if (this.rightAmount == 2) {
        count = this.total % 4
      } else if (this.rightAmount == 3) {
        count = this.total % 9
      } else {
        count = 1
      }
      //如果能整除说明是 第四个 或者 第九个
      if (count == 0) {
        if (this.rightAmount == 2) {
          count = 4
        } else if (this.rightAmount == 3) {
          count = 9
        }
      }
      let id = item.id
      /* alert(item.streamAddress)*/
      //如果事先选中了video框框，获取index 使指定video框 播放视频
      if (this.chooseIndex) {
        count = String(this.chooseIndex).substr(1, 1)
        // alert(count)
        //把获取的值 都转为数字，如果为string 则不能使用下方video拼接
        count = Number(count)
        this.chooseIndex = '';

      }
      let port = 13447
      if (count >= 6) {
        port = 13426
      }
      // 原代码
      // $(`#test${this.rightAmount + '' + count}`).html(`
      //         <iframe
      //           allowfullscreen="true"
      //            src="https://ycsz.sxyc.gov.cn:${port}/video/play.html?channel=${item.channel}&share=no&aspect=fullscreen"
      //           width="100%" height="100%"
      //           style="border: none;"
      //         ></iframe>
      //       `)
      // // 视频窗口名称
      this.viewName['name' + this.rightAmount + count] = item ? item.label : this.leftList[0].label
      this.viewName['id' + this.rightAmount + count] = item ? item.id : this.leftList[0].id
      // console.log(this.total, 'total')
      console.log("test=", this.rightAmount, count)
      //新增video播放代码；
      $(`#test${this.rightAmount + '' + count}`).html(`
        <video id="video${this.rightAmount + '' + count}"  style="border:none;width:100%;height:100%;background: black;"></video>
      `)
      this.player[`name${this.rightAmount}${count}`] = Videojs($(`#video${this.rightAmount + '' + count}`)[0], this.options)
      this.player[`name${this.rightAmount}${count}`].src([
        {
          src: item.path,
          type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
        }
      ])
    },
    removeVideo() {
      for (let key in this.player) {
        if (this.player[key]) {
          this.player[key].dispose()
        }
      }
    },
    showVideo(item) {
      return
      let id = item.id
      this.rightAmount = 1
      $(`#test${this.rightAmount + '' + 1}`).html(`
              <iframe
                allowfullscreen="true"
                 src="https://ycsz.sxyc.gov.cn:13447/video/play.html?channel=${item.channel}&share=no&aspect=fullscreen"
                width="100%" height="100%"
                style="border: none;"
              ></iframe>
            `)
      // 视频窗口名称
      // this.viewName['name' + (i + 1)]  = item ? item.label : this.leftList[0].label
      // this.viewName.id = item ? item.value : this.leftList[0].value
    },
    // 切换视图数量
    changeShowView(type, item) {
      if (!item && this.rightAmount === type) {
        return
      }
      this.total = 0
      this.rightAmount = type
      $('#fullScreen').find('iframe').css('display', 'none')
      this.viewName = {
        name11: '',
        name21: '',
        name22: '',
        name23: '',
        name24: '',
        name31: '',
        name32: '',
        name33: '',
        name34: '',
        name35: '',
        name36: '',
        name37: '',
        name38: '',
        name39: '',
      }
    },

  },
  beforeDestroy() {
    this.removeVideo()
  }
}
</script>

<style lang="scss" scoped>
.realtimeBody {
  margin-top: 10px;
  width: 100%;
  height: 790px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  display: flex;
  .left {
    width: 240px;
    height: 100%;
    background: #f8f9fb;
    border-radius: 4px 0px 0px 4px;
    .top {
      padding: 16px;
      border-bottom: 1px solid rgba(220, 224, 227, 1);
    }
    .tongji {
      padding: 16px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(220, 224, 227, 1);
      .btn {
        display: flex;
        align-items: center;
        .txt {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #46c180;
          margin-right: 6px;
        }
        .num {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #46c180;
        }
        .txt2 {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #b4b7be;
          margin-right: 6px;
        }
        .num2 {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #b4b7be;
        }
      }
      .guanlibtn {
        width: 36px;
        height: 22px;
        background: #46c180;
        border-radius: 3px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        margin-left: 18px;
        cursor: pointer;
      }
    }
    .realtime-tree {
      // height: calc(100%-200px);
      max-height: 700px;
      overflow-y: auto;
      padding: 16px;
      background-color: #ffffff;
      .custom-tree-node {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .label {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #4e5157;
          margin-right: 10px;
        }
      }
    }
  }
  .right {
    overflow-y: hidden;
    padding: 20px;
    flex: 1;

    .change {
      height: 28px;
      margin: 16px 22px;

      .change_1,
      .change_2,
      .change_3 {
        width: 34px;
        height: 28px;
        float: right;
        margin-left: 18px;
        cursor: pointer;
      }

      .change_one {
        float: right;
        background-color: #005fff;
      }

      .change_1 .change_one {
        width: 34px;
        height: 28px;
        border-radius: 5px;
      }

      .change_2 .change_one {
        width: 15px;
        height: 13px;
        border-radius: 3px;
        margin: 0 2px 2px 0;
      }

      .change_3 .change_one {
        width: 9px;
        height: 8px;
        border-radius: 2px;
        margin: 0 2px 2px 0;
      }
    }

    .content {
      padding: 0 25px;
      flex-direction: column;

      .one {
        float: left;
        background-color: #fff;
        position: relative;
        box-sizing: border-box;
        border: 4px solid #2c323e;

        .content {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          padding: 0;
        }

        .message_wrap {
          position: absolute;
          top: 0;
          left: 0;
          height: 40px;
          width: 100%;
          line-height: 40px;
          z-index: 50;
          cursor: pointer;
          background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0)
          );

          .message_left {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            .name {
              font-size: 16px;
              color: #fff;
              padding-left: 16px;
            }
          }
        }

        &:hover {
          border: 4px solid #005fff;
        }
      }

      .between {
        width: 25px;
      }

      .between_column {
        height: 25px;
      }

      .one_1 {
        padding-bottom: 52%;
      }

      .one_2 {
        padding-bottom: 24%;
      }

      .one_3 {
        padding-bottom: 16%;
      }
    }
  }

  #iframe {
    width: 100%;
    height: 100%;
  }
}
/* 弹性自适应布局样式 */
/*固定div的高宽用width,height就可以*/
.FlexBoxParent {
  display: -webkit-box; /*部分三星等较老内核*/
  display: flex; /*最新的*/
  display: -webkit-flex; /*android ios*/
}
.FlexBoxChildren {
  flex: 1;
  -webkit-flex: 1; /*flex -webkit-flex*/
  -webkit-box-flex: 1; /*-webkit-box*/
}
.right {
  overflow-y: hidden;
  .change {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    margin: 16px 22px;
    .change_1,
    .change_2,
    .change_3 {
      width: 34px;
      height: 28px;
      float: right;
      margin-left: 18px;
      cursor: pointer;
    }
    .change_one {
      float: right;
    }
    .change_1 .change_one {
      width: 34px;
      height: 28px;
      border-radius: 5px;
    }
    .change_2 .change_one {
      width: 15px;
      height: 13px;
      border-radius: 3px;
      margin: 0 2px 2px 0;
    }
    .change_3 .change_one {
      width: 9px;
      height: 8px;
      border-radius: 2px;
      margin: 0 2px 2px 0;
    }
    i {
      font-size: 30px;
      cursor: pointer;
    }
  }
  .content {
    padding: 0 25px;
    flex-direction: column;
    cursor: pointer;
    .one {
      float: left;
      background-color: #fff;
      position: relative;
      box-sizing: border-box;
      border: 4px solid #2c323e;
      .content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 0;
      }
      .message_wrap {
        position: absolute;
        top: 0;
        left: 0;
        height: 40px;
        width: 100%;
        line-height: 40px;
        z-index: 50;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.7),
          rgba(0, 0, 0, 0)
        );
        .message_left {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          .name {
            font-size: 16px;
            color: #fff;
            padding-left: 16px;
            max-width: 90%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      &:hover {
        border: 4px solid #4f8edd;
      }
    }
    .between {
      width: 25px;
    }
    .between_column {
      height: 25px;
    }
    .one_1 {
      padding-bottom: 52%;
    }
    .one_2 {
      padding-bottom: 24%;
    }
    .one_3 {
      padding-bottom: 16%;
    }
  }
}
//选择video box 选中样式
.choose-video-box {
  border: 4px solid #005fff !important;
}
.flex-space-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.video-setting-icon {
  margin: 0 5px;
  color: #fff !important;
  // display: none;
}

.flex-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.fullScreen {
  position: fixed;
  z-index: 9999;
  height: 100vh;
  width: 100vw;
  top: 0 !important;
  left: 0 !important;
  padding: 0 !important;
}
.threePadding {
  padding-bottom: 18.5% !important;
}
.twoPadding {
  padding-bottom: 27.5% !important;
}
.onePadding {
  padding-bottom: 55% !important;
}
.closeFullScreen {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 48%;
  top: 10%;
  z-index: 1008;
  cursor: pointer;
  i {
    color: #000;
    font-size: 24px;
  }
}
::v-deep .vjs-loading-spinner:after {
  display: none;
}
</style>
